const musicContainer = document.getElementById('music-container');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');

const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const title = document.getElementById('title');
const cover = document.getElementById('cover');

const songs = ['hey','summer','那些年你很冒险的梦'];//歌名

let songIndex = 2;//歌名索引

loadSong(songs[songIndex]);//初次加载歌曲到DOM

//更新歌曲信息
function loadSong(song){
    title.innerText = song;
    audio.src = `music/${song}.mp3`;
    cover.src = `images/${3}.jpg`;
}

//播放歌曲
function playSong(){
    musicContainer.classList.add('play');
    playBtn.querySelector('i.fas').classList.remove('fa-play');
    playBtn.querySelector('i.fas').classList.add('fa-pause');

    audio.play();

}

//暂停歌曲
function pauseSong(){
    musicContainer.classList.remove('play');
    playBtn.querySelector('i.fas').classList.add('fa-play');
    playBtn.querySelector('i.fas').classList.remove('fa-pause');
}

//上一首歌曲
function prevSong(){
    songIndex--;
    if(songIndex < 0){
        songIndex = songs.length - 1;
    }

    loadSong(songs[songIndex]);
    playSong();
}

//下一首歌曲
function nextSong(){
    songIndex++;
    if(songIndex > songs.length - 1){
        songIndex = 0;
    }

    loadSong(songs[songIndex]);
    playSong();
}

//更新进度条
function updateProgress(e) {
    const { duration,currentTime } = e.srcElement;
    const progressPercent =  (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;
}

//设置进度条
function setProgress(e){
    const width = this.clientWidth;
    const click = e.offsetX;
    const duration = audio.duration;

    audio.currentTime = (click / width) * duration;
}

//事件监听器
playBtn.addEventListener('click',function(){
    const isPlaying = musicContainer.classList.contains('play');

    if(isPlaying){
        pauseSong();
    }else{
        playSong();
    }
})

//改变歌曲
prevBtn.addEventListener('click',prevSong);
nextBtn.addEventListener('click',nextSong);

//时间/歌曲 update
audio.addEventListener('timeupdate',updateProgress);

//在进度条上点击
progressContainer.addEventListener('click',setProgress);

//歌曲结束
audio.addEventListener('ended',nextSong);


